<template>
  <el-header>
    <div class="center" style="position: fixed;
            top: 0;left: 0;z-index: 10000       ;
            background-color: white;">
      <el-row gutter="10" style="background-color: #333;">
        <el-col :span="2" style="width: 15%">
          <a href="/">
            <img src="http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png" width="196" height="65">
          </a>
        </el-col>
        <el-col :span="8" style="padding: 0">
          <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#fff" style="background-color: #333;text-align: center;width: 110%; border-bottom: solid 0;">
            <el-menu-item index="0" style="font-size: 20px; width: 80px" @click="toIndex()">首页
            </el-menu-item>
            <el-menu-item index="1" style="font-size: 20px; width: 80px" @click="toShop()">商城
            </el-menu-item>
            <el-menu-item index="2" style="font-size: 20px; width: 80px" @click="toSpansor()">
              赞助
            </el-menu-item>
            <el-menu-item index="3" style="font-size: 20px; width: 80px" @click="toGame()">
              休闲
            </el-menu-item>
            <el-menu-item index="4" style="font-size: 20px; width: 100px" @click="toMessageBoard()">
              留言板
            </el-menu-item>
              <el-menu-item index="5" style="font-size: 20px;width: 100px" @click="toChat()">
                  聊天室
              </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="6">
          <el-input style="margin-top: 20px; margin-left: 30px" placeholder="请输入搜索的关键字"
                    v-model:value="key" @input="change($event)" @keyup.enter.native="toBlogSelectSimilar()">
            <el-button slot="append" icon="el-icon-search" @click="toBlogSelectSimilar()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="1">
          <div style="margin-left: 20px;">
            <el-popover
                v-if="!isSignByToday"
                placement="top-start"
                trigger="hover"
                append-to-body>
              <div slot="reference">
                <i class="el-icon-date" style="font-size: 35px;position: relative;margin:20px 20px;"></i>
              </div>
              <el-button style="background-color: #3c32fb;color: white" @click="sign()">每日签到</el-button>
            </el-popover>
            <el-popover
                v-else
                placement="top-start"
                trigger="hover"
                append-to-body>
              <div slot="reference">
                <i class="el-icon-date" style="font-size: 35px;position: relative;margin:20px 20px;"></i>
              </div>
              <el-button type="info" disabled>已签到</el-button>
              <p>已经签到了<span style="color:blue;font-weight: bold;font-size: 20px">{{signCount}}</span>天,继续加油!</p>
              <p style="font-size: 2px">签到规则:每天签到一次+5积分</p>
            </el-popover>
          </div>
        </el-col>
        <el-col :span="2" >
          <div style="margin-left:20px">
            <el-popover v-if="user==null"
                        placement="top-start"
                        title="欢迎来到kun吧"
                        width="200"
                        trigger="hover"
                        append-to-body>
              <div slot="reference">
                <i class="el-icon-user" style="font-size: 35px;position: relative;margin:20px 20px;"></i>
              </div>
              <el-button type="info" @click="register()">注册</el-button>
              <el-button style="background-color: #3c32fb;color: white" @click="login()">登录</el-button>
            </el-popover>
            <el-popover v-else
                        placement="top-start"
                        title="欢迎来到kun吧"
                        width="200"
                        trigger="hover"
                        append-to-body>
              <div slot="reference">
                <a href="/personalCenter.html">
                  <el-avatar :src="user.avatar" style="font-size: 35px;position: relative;margin:20px 20px;"></el-avatar>
                </a>
              </div>
              <div style="text-align: center">
                <a href="/personalCenter.html">
                  <el-avatar :src="user.avatar"></el-avatar>
                </a>
                <el-button type="text" @click="Popup"
                           style="z-index: 99999; position: absolute; right: 5px; top: 62px; color: #bfc7cb">修改个人信息
                </el-button>
                <hr>
                <p style="margin: 0">昵称：{{ user.nickname }}</p>
                <p style="margin: 0">等级：{{ user.level }}</p>
                <a @click="tointegral()">积分：{{ integral }}</a>
                <br>
                <a @click="tomessage()">消息</a>
                <br>
                <a @click="tocollection()">收藏</a>
                <br>
                <a href="javascript:void(0)" @click="logout()">退出登录</a><br>
                <a v-if="user.state==1" href="/admin.html">后台管理页面</a>
              </div>
            </el-popover>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button style="margin-top: 20px" type="info" round @click="put()">发布</el-button>
        </el-col>
      </el-row>
    </div>
  </el-header>
</template>

<style>
.center {
  width: 100%;
  margin: 0 auto;
  min-width: 1200px;
}

</style>

<script>

module.exports = {
  name: 'Top',
  data() {
    return {
      isSignByToday:'',
      signCount:'',
      key: '',
      activeIndex: "0",
      user: localStorage.user ? JSON.parse(localStorage.user) : null,
      userId: '',
      integral: ''
    }
  },
  created() {
    let s = window.location.pathname;
    if (s === "/index.html" || s === "/") {
      this.activeIndex = '0';
    } else if (s === "/shop.html") {
      this.activeIndex = '1';
    } else if (s === "/spansor.html") {
      this.activeIndex = '2';
    } else if (s === "/game.html") {
      this.activeIndex = '3';
    } else if (s === "/MessageBoard.html") {
      this.activeIndex = '4';
    }
    else if (s === "/chat.html") {
        this.activeIndex = '5';
    } else {
      this.activeIndex = '';
    }
    this.getIntegral();
    this.getSignOrNot();
    this.queryMe();
  },
  methods: {
      queryMe(){
          if (window.location.pathname==="/index.html"||window.location.pathname==="/MessageBoard.html"||window.location.pathname==="/loginByPassword.html"||window.location.pathname==="/loginByEmail.html"||window.location.pathname==="/loginByPhone.html"||window.location.pathname==="/regByEmail.html"||window.location.pathname==="/regByPhone.html"){
              return;
          }
          let url = 'http://localhost:8088/user/me'
          this.axios.get(url).then((response) => {
              if (response.data.code===1){
                  localStorage.user = JSON.stringify(response.data.data);
                  this.user=localStorage.user ? JSON.parse(localStorage.user) : null;
              }else {
                  alert(response.data.msg);
                  window.location.href='loginByPassword.html'
              }
          });
      },
    sign() {
      if (this.user===null) {
        alert('请先登录');
        return;
      }
      let url = 'http://localhost:8088/userSign/sign';
      this.axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.$message.success(jsonResult.data);
          this.getSignOrNot();
        }else {
          this.$message.error(jsonResult.data);
        }
      });
    },
    getSignOrNot(){
      let url = 'http://localhost:8088/userSign/signOrNot'
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          if (jsonResult.data === "已签到"){
            this.isSignByToday=true;
            this.getSignCount();
          }else {
            this.isSignByToday=false
          }
        }
      });
    },
    getSignCount(){
      let url = 'http://localhost:8088/userSign/sign/count'
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.signCount=jsonResult.data;
        }
      });
    },
    Popup() {
      window.open(
          "ChangeInfo.html",
          '_blank',
          'width=500,height=500,toolbar=no,' +
          'scrollbars=no,menubar=no,screenX=500,screenY=150',
      )
      // window.location.href="ChangeInfo.html"
      // this.region();
    },
    getIntegral() {
      let url = 'http://localhost:8088/userIntegral/queryMe';
      this.axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.integral = jsonResult.data;
        }
      });
    },
    change(e) {
      this.$forceUpdate()
    },
    logout() {
      if (confirm("您确认退出登录吗?")) {
        //发请求退出登录
        let url = 'http://localhost:8088/user/logout'
        this.axios.post(url).then(function () {
          localStorage.clear();//清空登录成功时保存的数据
          window.location.href = "index.html"
        })
      }
    },
      toChat(){

        window.location.href="chat.html"
      },
    toGame() {

      window.location.href = "game.html"
    },
    tointegral() {
      window.location.href = "integral.html"
    },
    login() {
      window.location.href = "loginByPassword.html"
    },
    register() {
      window.location.href = "regByPhone.html"
    },
    toIndex() {
      console.log(this.activeIndex)
      window.location.href = "index.html"
    },
    toShop() {
      console.log(this.activeIndex);
      window.location.href = "shop.html"
    },
    toSpansor() {
      console.log(this.activeIndex)
      window.location.href = "spansor.html"
    },
    toMessageBoard() {
      console.log(this.activeIndex);
      window.location.href = "MessageBoard.html"
    },
    toBlogSelectSimilar() {

      localStorage.setItem('k', this.key)
      window.location.href = "blogSelectSimilar.html"
    },
      tocollection(){

        window.location.href="collect.html"

      },

    put() {
      window.location.href = "put.html"
    },



  }

}
</script>
<style>
.el-menu {
  width: 500px;
  padding: 15px 0 0 0;
  margin: 0 auto;
}
.el-icon-date{
    color: #909399;
}

.el-icon-user{
    color: #909399;
}

.el-menu-item:hover {
  background-color: lightpink !important;
}
</style>
